$feature-flags: (
  grid-columns-16: true,
);

@import "~carbon-components/scss/globals/scss/styles.scss";
@import "~carbon-components/scss/globals/grid/grid";

html,
body {
  @media (min-width: 66rem) {
    height: 100%;
  }
  background: #f2f4f8;
}

#options-root {
  @media (min-width: 66rem) {
    height: 100%;

    .bx--grid,
    .bx--row,
    .leftPanel {
      height: 100%;
    }
  }

  .bx--grid {
    padding: 0rem 1rem;
  }

  p {
    margin-top: 1.5rem;

    @media (min-width: 42rem) {
      max-width: 75%;
    }
  }

  .leftPanel {
    padding: 2rem 1rem;

    .icon {
      height: 2rem;
    }

    h2 {
      color: #252525;
      @include carbon--type-style("productive-heading-04");
      margin-top: 2rem;
    }
    .op_version {
      color: #525252;
      @include carbon--type-style("caption-01");
    }

    p {
      @media (min-width: 66rem) {
        max-width: 100%;
      }
    }
  }

  .buffer {
    background-color: white;
  }

  .rightPanel {
    background-color: white;
    padding: 3rem 1rem 1rem 1rem;
    @media (min-width: 66rem) {
      padding-top: 6rem;
    }

    .bx--dropdown__wrapper {
      margin-top: 1.5rem;
      @media (min-width: 42rem) {
        max-width: 75%;
      }
    }

    .op_helper-text {
      color: #525252;
      @include carbon--type-style("caption-01");
      margin-top: 0.5rem;
    }

    h1 {
      color: #252525;
      @include carbon--type-style("productive-heading-03");
      margin-bottom: 48px;
    }

    h2 {
      @include carbon--type-style("productive-heading-02");
      margin-top: 1rem;
    }

    .accordion {
      margin-top: 1rem;
      @media (min-width: 42rem) {
        max-width: 75%;
      }

      .bx--dropdown__wrapper {
        margin-top: 1.5rem;
        @media (min-width: 42rem) {
          max-width: 100%;
        }
      }

      .bx--accordion__content {
        padding-right: 15%;
      }

      .accordionItem {
        @media (min-width: 42rem) {
          max-width: 100%;
        }
      }

      p {
        @media (min-width: 42rem) {
          max-width: 100%;
        }

        ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        li::before {
          content: "—";
          padding-right: 0.5rem;
        }
      }
    }

    .rulesetDate {
      color: #262626;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0;
      line-height: 1.375rem;
    }

    .buttonRow {
      margin-top: 1.5rem;
      display: flex;
      margin-right: 1rem;
      @media (min-width: 42rem) {
        max-width: 73.2%;
      }

      .bx--btn {
        min-width: 50%;
      }

      .bx--btn + .bx--btn {
        margin-left: 1rem;
      }
    }

    .notification {
      margin-top: 1.5rem;
      display: flex;
      @media (min-width: 42rem) {
        max-width: 73.2%;
      }

      p {
        margin-top: 0rem;
      }
    }
  }
}
